@extends('layouts.app')
@section('content')
    <div id="all-content" style="margin:0 auto; width: 680px;">

        <h4>
            <!-- <a href="{{ url('/home') }}">< 返回首页</a> -->
        </h4>

        <h1 style="text-align: center; margin-top: 50px; font-weight: bold;">{{ $paper->title }}</h1>
        <hr>
        <input id="article_id" type="hidden" value="{{ $paper->id }}">
        <div id="message" style="text-align: center; ">
        @foreach ($paper->hasManyUsers as $user)
        <p>作者 - {{ $user->name }}</p>
        <span style="border: 1px solid #F1907F; padding: 2px 5px; border-radius: 3px; color:#F1907F; ">{{ $paper->category }}</span>
        &nbsp;&nbsp;&nbsp;&nbsp;阅读({{$paper->read_total}})
        &nbsp;&nbsp;&nbsp;&nbsp;回复{{$paper->reply_total}}
        &nbsp;&nbsp;&nbsp;&nbsp;点赞{{$paper->upvote_total}}
        &nbsp;&nbsp;&nbsp;&nbsp;{{ $paper->created_at }}
        @endforeach
        </div>
        <p style="margin: 40px; text-align:center;"><img style="width:400px;" src="{{ '/lv5/public/img/cover/'.$paper->cover_img }}" alt=""></p>
        <div id="content" style="margin: 20px; min-height: 200px; line-height: 27px;">
            
            <p>
                {{ str_replace(" ", " ", str_replace("\n", '&lt;br&gt;', $paper->body)) }}
            </p>
        </div>
        <div id="upvote-paper" style="margin: 20px;">
            <p>
                <a id="upvote" href="javascript:void(0);">点赞</a>&nbsp;<span id="upvote_total">{{ $paper->upvote_total }}</span>
            </p>
        </div>
        <div id="comments" style="margin-top: 50px;">

            @if (count($errors) > 0)
                <div class="alert alert-danger">
                    <strong>操作失败</strong> 输入不符合要求<br><br>
                    {!! implode('<br>', $errors->all()) !!}
                </div>
            @endif
            <hr>
            <div id="new">
                <form action="{{ url('comment') }}" method="POST">
                    {!! csrf_field() !!}
                    <input type="hidden" name="paper_id" value="{{ $paper->id }}">
                    <div class="form-group">
                        <label>Nickname</label>
                        <input type="text" name="nickname" class="form-control" style="width: 300px;" required="required">
                    </div>
                    <div class="form-group">
                        <label>Email address</label>
                        <input type="email" name="email" class="form-control" style="width: 300px;">
                    </div>
                    <div class="form-group">
                        <label>Home page</label>
                        <input type="text" name="website" class="form-control" style="width: 300px;">
                    </div>
                    <div class="form-group">
                        <label>Content</label>
                        <textarea name="content" id="newFormContent" class="form-control" rows="10" required="required"></textarea>
                    </div>
                    <button type="submit" class="btn btn-lg btn-success col-lg-12">Submit</button>
                </form>
            </div>

            <div class="conmments" style="margin-top: 100px;">
                @foreach ($paper->hasManyComments as $comment)

                    <div class="one" style="border-top: solid 20px #efefef; padding: 5px 20px;">
                        <div class="nickname" data="{{ $comment->nickname }}">
                            @if ($comment->website)
                                <a href="{{ $comment->website }}">
                                    <h3>{{ $comment->nickname }}</h3>
                                </a>
                            @else
                                <h3>{{ $comment->nickname }}</h3>
                            @endif
                            <h6>{{ $comment->created_at }}</h6>
                        </div>
                        <div class="content">
                            <p style="padding: 20px;">
                                {{ $comment->content }}
                            </p>
                        </div>
                        <div class="reply" style="text-align: right; padding: 5px;">
                            <a href="#new" onclick="reply(this);">回复</a>
                        </div>
                    </div>

                @endforeach
            </div>
        </div>

    </div>
@endsection